<template>
  <a-modal
    title="审核用户"
    :centered="true"
    :width="900"
    wrapClassName="common_modal audit_user_modal"
    v-model:open="visible"
    :confirm-loading="confirmLoading"
    okText="审核通过"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-table class="common_table" :columns="columns" :data-source="checkList" :pagination="false">
      <template #certificate="{ record }">
        <span title="点击预览证书">
          <span v-if="record.imgList.length" @click="toPreviewImg(record.imgList)"
            ><FileImageOutlined
          /></span>
          <span v-for="(item, index) in record.pdfList" :key="index" @click="toPreviewPdf(item)"
            ><FileOutlined
          /></span>
        </span>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { userAuditBatch } from '@/axios/api/user_api'
import { FileImageOutlined, FileOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
interface ImgType {
  src: string
  sort: number
}
const columns = [
  {
    title: '用户名',
    dataIndex: 'userName',
    align: 'center',
    width: 180,
    ellipsis: true
  },
  {
    title: '账号',
    dataIndex: 'userAccount',
    align: 'center',
    width: 120,
    ellipsis: true
  },
  {
    title: '所属医院',
    dataIndex: 'hospName',
    align: 'center',
    width: 180,
    ellipsis: true
  },
  {
    title: '绑定设备',
    dataIndex: 'equipmentName',
    align: 'center',
    width: 180,
    ellipsis: true
  },
  {
    title: '证书',
    dataIndex: '',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'certificate' }
  }
]
const emit = defineEmits(['getPage'])
const [messageApi] = message.useMessage()
const visible = ref(false)
const confirmLoading = ref(false)
const checkList = ref<any>([])
function getExamList(data: any) {
  const imgList = ref<ImgType[]>([])
  const pdfList = ref<string[]>([])
  if (data && data.length) {
    data.forEach((urlItem: any, index: number) => {
      let urltype = getFileType(urlItem)
      if (urltype === 'img') {
        imgList.value.push({ src: urlItem, sort: index + 1 })
      } else {
        pdfList.value.push(urlItem)
      }
    })
  }
  return {
    imgList: imgList,
    pdfList: pdfList
  }
}

function getFileType(url: string) {
  let index = url.lastIndexOf('.')
  let ext = url.substr(index + 1)
  if (ext === 'pdf') {
    return 'pdf'
  } else {
    return 'img'
  }
}
function showModal(data: any, type: string | undefined) {
  checkList.value = []
  if (type === 'single') {
    checkList.value.push(data)
  } else {
    checkList.value = data
  }
  checkList.value = checkList.value.map((item: any) => {
    let info = getExamList(item)
    return {
      ...item,
      ...info
    }
  })
  visible.value = true
}
function toPreviewImg(imgList: ImgType[]) {
  console.log('%c [ imgList ]-92', 'font-size:13px; background:pink; color:#bf2c9f;', imgList)
}
function toPreviewPdf(url: string) {
  console.log('%c [ url ]-89', 'font-size:13px; background:pink; color:#bf2c9f;', url)
}
function handleOk() {
  confirmLoading.value = true
  const tempList: any = []
  checkList.value.forEach((item: any) => {
    tempList.push({ userId: item.userId, equipmentId: item.equipmentId })
  })
  userAuditBatch(tempList)
    .then((data) => {
      if (data.code === 200) {
        messageApi.success(data.msg)
        emit('getPage')
        visible.value = false
      }
    })
    .finally(() => {
      confirmLoading.value = false
    })
}
function handleCancel() {
  visible.value = false
}
defineExpose({
  showModal
})
</script>
